<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3 3D转换</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        background-color: #FFF;
    }
    
    .music-box {
        width: 300px;
        height: 300px;
        margin: 50px auto;
        position: relative;
        perspective: 1000px;
    }
    
    .music-box::after,
    .music-box::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transform-origin:  bottom;
    }
    
    .music-box::before {
        background-image: url(images/musicb.jpg);
    }
    
    .music-box::after {
        background-image: url(images/musict.jpg);
        transition: all 1s;
    }
    .music-box:hover::after{
    		transform: rotateX(180deg);
    }
    </style>
</head>

<body>
    <div class="music-box"></div>
</body>

</html>
